<template>
    <div style="margin: 10px">
        <h2>背包问题</h2>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-input class="stuff-info" v-model="newStuff.name" size="mini">
                            <template slot="prepend">名称</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-input class="stuff-info" v-model="newStuff.weight" size="mini">
                            <template slot="prepend">所需时长</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-input class="stuff-info" v-model="newStuff.value" size="mini">
                            <template slot="prepend">分数</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button size="mini" @click="add">增加</el-button>
                        <el-button size="mini" @click="save">保存</el-button>
                    </el-col>
                </el-row>
                <el-table
                        :data="stuffs"
                        height="400"
                        border
                        style="width: 100%;margin-top:8px">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="名称"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="weight"
                            label="时长"
                            width="55" sortable>
                    </el-table-column>
                    <el-table-column
                            prop="value" width="55"
                            label="分数" sortable>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="55">
                        <template scope="scope">
                            <el-button
                                    @click.native.prevent="deleteRow(scope.$index, stuffs)"
                                    type="text"
                                    size="small">
                                移除

                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-input class="stuff-info" v-model="maxWeight" size="mini">
                            <template slot="prepend">最大时长</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button size="mini" @click="compute">计算</el-button>
                    </el-col>
                    <el-col :span="6">
                        <el-input class="stuff-info" v-model="total" size="mini" :disabled="true">
                            <template slot="prepend">总时长</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-input class="stuff-info" v-model="amount" size="mini" :disabled="true">
                            <template slot="prepend">总分数</template>
                        </el-input>
                    </el-col>
                </el-row>
                <el-table
                        :data="list"
                        height="400"
                        border
                        style="width: 100%;margin-top:8px">
                    <el-table-column
                            prop="name"
                            label="名称">
                    </el-table-column>
                    <el-table-column
                            prop="weight"
                            label="时长"
                            width="100" sortable>
                    </el-table-column>
                    <el-table-column
                            prop="value" width="100"
                            label="分数" sortable>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {Matrix, Cell, Stuff, Backpack} from './backpack-js'
    import fakerString from './faker'

    export default {
        name: 'app',
        data () {
            return {
                stuffs: [],
                maxWeight: '10',
                total: 0,
                newStuff: {name: '', weight: 0, value: 0},
                amount: 0,
                list: [],
                selected: []
            }
        },
        methods: {
            compute(){
                let {list, totalWeight, amount} = Backpack(this.stuffs, Number.parseInt(this.maxWeight));
                this.list = list;
                this.total = totalWeight;
                this.amount = amount;
            },
            add(){
                let stuff = new Stuff(Number.parseInt(this.newStuff.weight), Number.parseInt(this.newStuff.value), this.newStuff.name);
                if (stuff.name && stuff.value) {
                    this.stuffs.push(stuff);
                }
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            save() {
                debugger;
                let name = 'test.html';
                let data = '保存文件';
                var urlObject = window.URL || window.webkitURL || window;

                var export_blob = new Blob([data]);

                var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
                save_link.href = urlObject.createObjectURL(export_blob);
                save_link.download = name;
                var ev = document.createEvent("MouseEvents");
                ev.initMouseEvent(
                    "click", true, false, window, 0, 0, 0, 0, 0
                    , false, false, false, false, 0, null
                );
                save_link.dispatchEvent(ev);
            },
        },
        mounted(){
            debugger;
            let fakerRows = fakerString.split(';');
            let fakerStuff = [];
            for (let i = 0; i < fakerRows.length; i++) {
                let faker = fakerRows[i].split(/\t/);
                fakerStuff[i] = new Stuff(Number.parseInt(faker[5]), Number.parseInt(faker[3]), faker[0]);
            }
            this.stuffs = fakerStuff;
        }
    }
</script>

<style>
    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
